<template>
  <div class='container'>
    <el-dialog title="试题信息" :visible="dialogVisible" width="50%" @close="closeDialog">
      <div>

        <el-row :gutter="24">
          <el-col :span="6">【题型】: {{formatType(filterlist.questionType)}}</el-col>
          <el-col :span="6">【编号】：{{filterlist.id}}</el-col>
          <el-col :span="6">【难度】：{{formatType1(filterlist.difficulty)}}</el-col>
          <el-col :span="6">【标签】：{{filterlist.tags}}</el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="6">【学科】:{{filterlist.subjectName}}</el-col>
          <el-col :span="6">【目录】:{{filterlist.directoryName}}</el-col>
          <el-col :span="12">【方向】:{{filterlist.direction}}</el-col>
        </el-row>

        <hr>
        【题干】：
        <!-- <template>
          <span v-html="filterlist.question" style="color:blue"></span>
          <p> {{formatType(filterlist.questionType)}}：（以下选中的选项为正确答案）</p>
          <div class="clajss">
            <template>
              <el-radio-group v-model="radio"  v-for="item in filterlist.options" :key="item.id" >
                <el-radio  :label="item.isRight" @change="addchange" >{{item.code }}:{{item.title }}</el-radio>
                </el-radio-group>
            </template>
         </div>
        </template> -->
       <template>
          <span v-html="filterlist.question" style="color:blue"></span>
          <div class="clajss">
          <div  v-if="filterlist.questionType==='1'">
          <p> {{formatType(filterlist.questionType)}}：（以下选中的选项为正确答案）</p>
            <template>
              <el-radio-group v-model="radio"  v-for="item in filterlist.options" :key="item.id" >
                <el-radio  :label="item.isRight" @change="addchange" >{{item.code }}:{{item.title }}</el-radio>
              </el-radio-group>
            </template>
          </div>
            <div v-if="filterlist.questionType==='2'">
              <p> {{formatType(filterlist.questionType)}}：（以下选中的选项为正确答案）</p>
              <el-checkbox-group v-model="checkList" v-for="item in filterlist.options" :key="item.id"  >
                <el-checkbox  :label="item.isRight" @change="addchange">{{item.code }}:{{item.title}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-else-if="filterlist.questionType==='3'">
              <p></p>
            </div>
          </div>
        </template>

        <hr>
          【参考答案】:<el-button type="danger" @click="lookAnswer">参考答案预览</el-button>
          <div>
            <video width="300px" height="200px" v-if="flag" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-learning-vue/52e63a10-aecd-11ea-b43d-2358b31b6ce6.mp4" controls>
            </video>
          </div>

        <hr>
        【答案解析】：<span v-html="filterlist.remarks"></span>
        <hr>
        【题目备注】：<span v-html="filterlist.chkRemarks"></span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog" style="flex:right">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuestionsPreveiew',
  props: {
    dialogVisible: {
      type: Boolean
    },
    filterlist: {
      required: true
    }
  },
  // props: ["'dialogVisible','obj'"],
  data () {
    return {
      radio: 1,
      checkList: [1],
      flag: false
    }
  },

  methods: {
    closeDialog () {
      this.$emit('close-dialog')
      this.flag = false
    },

    formatType1 (value) {
      if (value === '1') {
        return '简单'
      } else if (value === '2') {
        return '一般'
      } else if (value === '3') {
        return '困难'
      }
    },
    formatType (value) {
      if (value === '1') {
        return '单选'
      } else if (value === '2') {
        return '多选'
      } else if (value === '3') {
        return '简答'
      }
    },
    lookAnswer () {
      this.flag = !this.flag
    },
    addchange () {
      this.radio = 1
      this.checkList = [1]
    }

  }
}
</script>

<style scoped lang='scss'>
// .el-radio{
//   display: inline-block;
//   align-items: center;
// }

.el-radio-button__inner, .el-radio-group {
    display: block;
    line-height: 1;
    align-items: center;
}

</style>
